<template>
  <div class="login_box">
      <div class="ab_pet1" @click="onClick1">
          <span></span>
      </div>
      <div class="ab_pet9">
          <span></span>
      </div>
      <div class="ab_pet2">
          <img src="../assets/images/home/h3.png" alt="图片" class="img1">
      </div>
      <div class="ab_pet10">
          <span></span>
      </div>
      <div class="ab_pet3">
          <span></span>
      </div>
      <div class="ab_pet4">
          <img src="../assets/images/home/h4.png" alt="图片" class="img1">
      </div>
      <div class="ab_pet8">
          <span></span>
      </div>
      <div class="ab_pet5">
          <div class="ab_col1"></div>
          <img src="../assets/images/home/h5.png" alt="图片" class="img2">
      </div>
      <div class="ab_pet6">
          <span></span>
      </div>
      <div class="ab_pet7" @click="onClick2">
          <span></span>
      </div>
      <div class="ab_pet11">
          <div class="ab_col2"></div>
      </div>
      <div class="ab_pet13" @click="onClick3">
          <span></span>
      </div>
      <div class="ab_pet12">
          <img src="../assets/images/home/h8.png" alt="图片" class="img3">
      </div>
  </div>
  </template>
  
  <script>
  export default {
      data(){
          uid:localStorage.getItem('userId');
          return{
  
              //用户ID
              uid:localStorage.getItem("userId"),
          }
      },
      mounted(){
          console.log('uid:',this.uid);
      },
      methods:{
          onClick1(){
              this.$router.push({path:'/aboutus'});
          },
          onClick2(){
              this.$router.push({path:'/knowofpet'});
          },
          onClick3(){
              this.$router.push({path:'/petconsult'});
          }
      }
  }
  </script>
  
  <style scoped>
  
  /* 大盒子 */
  .login_box{
      width: 80%;
      height: 100rem;
      margin: 0rem auto;
      background-color: pink;
      font-size: 0;
      margin-top: 15px
  }
  .ab_pet1{
      width: 26%;
      height: 22%;
      margin-left: 2%;
      margin-top: 2%;
      background-image: url('../assets/images/home/h1.png');
      background-size:100% 100%;
      display: inline-block;
  }
  .ab_pet1:hover{
      background-image: url('../assets/images/home/h2.png');
      background-size:100% 100%;
  }
  .ab_pet9{
      width: 4%;
      height: 22%;
      margin-left: 8%;
      background-color:rgb(116,214,213);
      display: inline-block;
  }
  .ab_pet2{
      width: 56%;
      height: 22%;
      background-size:100% 100%;
      display: inline-block;
  }
  
  .img1{
      width: 100%;
      height: 100%;
      background: #fff;
      box-shadow: #fff;
      filter: drop-shadow(#fff 20px 20px 20px);
  }
  .ab_pet10{
      width: 4%;
      height: 22%;
      background-color:rgb(116,214,213);
      display: inline-block;
  }
  .ab_pet3{
      width: 18%;
      height: 22%;
      margin-left: 36%;
      background-color:rgb(116,214,213);
      display: inline-block;
  }
  .ab_pet4{
      width: 28%;
      height: 22%;
      display: inline-block;
  }
  .ab_pet8{
      width: 18%;
      height: 22%;
      background-color:rgb(116,214,213);
      display: inline-block;
  }
  .ab_pet5{
      width: 46%;
      height: 25%;
      margin-left: 2%;
      background-color:rgb(116,214,213);
      display: inline-block;
  }
  .ab_col1{
      height: 20%;
      background-color: rgb(247,221,121);
  }
  .img2{
      width: 100%;
      height: 80%;
  }
  .ab_pet6{
      width: 20%;
      height: 25%;
      background-color:rgb(247,221,121);
      display: inline-block;
  }
  .ab_pet7{
      width: 26%;
      height: 22%;
      margin-left: 4%;
      background-image: url('../assets/images/home/h6.png');
      background-size:100% 100%;
      display: inline-block;
  }
  .ab_pet7:hover{
      background-image: url('../assets/images/home/h7.png');
      background-size:100% 100%;
  }
  .ab_pet11{
      width: 22%;
      height: 28%;
      display: inline-block;
      margin-left: 10%;
      background-color: rgb(247,221,121);
  }
  .ab_col2{
      height: 100%;
      background-color: rgb(247,221,121);
      display: inline-block;
  }
  .ab_pet12{
      width: 22%;
      height: 28%;
      display: inline-block;
  }
  .img3{
      width: 100%;
      height: 100%;
      display: inline-block;
  }
  .ab_pet13{
      width: 26%;
      height: 23%;
      margin-right: 10%;
      background-image: url('../assets/images/home/h9.png');
      background-size:100% 100%;
      display: inline-block;
  }
  .ab_pet13:hover{
      background-image: url('../assets/images/home/h10.png');
      
      background-size:100% 100%;
  }
  @media screen and (max-width:768px){
            /* 手机屏幕 */
  .login_box{
      zoom:0.3;
  }
    }
   @media screen and (max-width:992px) and (min-width:768px){
            /* 平板 */
  
    }
  </style>